<template>
  <div>
    <van-nav-bar left-arrow @click-left="onClickLeft" />

    <h2>登录</h2>
    <p class="tiaokuan">
      登录注册表示同意
      <a href>花粉儿条款与规范</a>
    </p>

    <van-cell-group>
      <van-field v-model="phone" center clearable left-icon="contact" placeholder="请输入用户名">
      </van-field>

      <van-field type="password" v-model="sms" left-icon="certificate" placeholder="请输入密码" />
    </van-cell-group>

    <van-button to="/register" class="yy" type="primary" size="mini">还没有注册？</van-button>
    <van-button class="btn" @click="login" type="primary" size="large" color="#ff6678">登录</van-button>


  </div>
</template>
<script>
  import * as api from '@/api/postProList';
export default {
  data() {
    return {
      phone: "",
      sms: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back(-1)
    },
    login() {
      let password = this.$md5(this.sms);
      if(this.phone=="" || password==""){
        this.$dialog.alert({
          title: '用户名或密码错误',
        }).then(() => {
          // on close
        });
      }
      api.login({userName:this.phone,password:password}).then(res=>{
        if(res.data.code == 'success'){

          this.$store.commit('getToken',{token:res.data.token})

          this.$store.commit('getMessage',{message:{username:this.phone}});
          this.$toast('登录成功')
          this.$router.push("/Index");
        }else{
          this.$toast('用户名或密码错误')
        }
      })
    },
    showPopup() {
      this.show = true;
    },
  }
}
</script>
<style scoped>
h2 {
  font-size: 22px;
  font-weight: 500;
  margin-left: -245px;
  margin-top: 10px;
}
.tiaokuan {
  font-size: 14px;
  margin-left: -60px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.tiaokuan a {
  display: inline;
  color: #7795c3;
}
.yy {
  display: block;
  width: 100px;
  font-size: 12px;
  color: #7795c3;
  margin-left: 10px;
  margin-top: 6px;
  background: 0;
  border:0;
}
.btn {
  width: 280px;
  height: 35px;
  border-radius: 20px;
  margin-top: 35px;
  font-size: 14px;
  line-height: 0;
}
.hq {
  background: #fff;
  color: #ff6678;
  border: 1px solid #ff6678;
}
</style>
